<!--  -->
<template>
  <div class="table-ip4">
    <el-table size="medium" v-loading="loading" :data="dataBlackTable" style="width: 100%">
      <el-table-column prop="name" label="规则" :resizable="false" width="150">
      </el-table-column>
      <el-table-column prop="total" label="封禁国家/IP" :resizable="false">
      </el-table-column>
      <el-table-column label="规则状态" prop="statue" width="140" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.statue" active-color="#13ce66"
            @change="changeShow(scope.row.id, scope.row.statue)" :disabled="scope.row.id === 1 && !ipgeo">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column width="250" header-align="center" align="center" fixed="right" label="操作" :resizable="false">
        <template slot-scope="scope">
          <el-button @click="edititem(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Editblackarea ref="editblackarea" :blackarea="blackarea" :resetData="resetData"/>
    <Editblacklist ref="editblacklist" :blacklist="blacklist" :resetData="resetData"/>
  </div>
</template>

<script>
import Editblackarea from '@/pages/backend/user/host/hostip/blackWhite/Editblackarea.vue'
import Editblacklist from '@/pages/backend/user/host/hostip/blackWhite/Editblacklist.vue'
export default {
  props: {
    dataBlackTable: {
      type: Array
    },
    blackarea: {
      type: Array
    },
    blacklist: {
      type: Array
    },
    resetData: {
      type: Function
    },
    ipgeo: {
      type: Number
    }
  },
  created () {
  },
  data () {
    return {
      loading: false,
      formLabelWidth: '120px'
    }
  },
  watch: {
  },
  methods: {
    changeShow (id, statue) {
      if (parseInt(id) === 1) {
        if (!this.ipgeo) {
          this.$message.error('购买增值服务可启用国家黑、白名单功能！')
          return
        }
        let blackareaStatus = statue ? 1 : 0
        // 请求后台修改状态
        this.$post('/hostip4/update-ip4release-blackarea-status', {blackareaStatus: blackareaStatus}).then(response => {
          if (response) {
            this.resetData(response)
          }
        })
      }
      if (parseInt(id) === 2) {
        let blacklistStatus = statue ? 1 : 0
        // 请求后台修改状态
        this.$post('/hostip4/update-ip4release-blacklist-status', {blacklistStatus: blacklistStatus}).then(response => {
          if (response) {
            this.resetData(response)
          }
        })
      }
    },
    edititem (data) {
      if (data.id === 1) {
        if (!this.ipgeo) {
          this.$message.error('购买增值服务可启用国家黑、白名单功能！')
          return
        }
        this.$refs['editblackarea'].show()
      }
      if (data.id === 2) {
        this.$refs['editblacklist'].show()
      }
    }
  },
  components: {
    Editblackarea,
    Editblacklist
  }
}

</script>

<style scoped lang="scss">
.table-ip4 /deep/ .el-table th {
  color: #555;
}
.table-ip4 /deep/ .el-table__fixed-right{
  height: 100% !important;
}
</style>
